<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>抱团</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui,viewport-fit=cover"/>
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <meta name="keywords" content="抱团">
    <meta name="description" content="抱团">
    <script type="text/javascript" src="js/base.js" charset="UTF-8"></script>
    <link rel="stylesheet" type="text/css" href="css/theme-chalk/index.css">
    <link rel="stylesheet" type="text/css" href="css/swiper-bundle.min.css">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script type='text/javascript' src="js/jquery.min.js" charset="UTF-8"></script>
    <!-- <script type='text/javascript' src="js/html2canvas.min.js" charset="UTF-8"></script> -->
    <script type="text/javascript" src="js/layer/layer.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/vue.js" charset="UTF-8"></script>
    <script type="text/javascript" src="js/axios.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/elementui.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="js/swiper-bundle.min.js" charset="UTF-8"></script>
    <script type='text/javascript' src="../common/js/helper.js" charset="UTF-8"></script>
</head>
<style>
    html,body,.wrapperbox {height: 100%;overflow: hidden;position: relative;}
    .scrollbox{height: 100%;overflow: scroll;}
</style>
<body>
    <div class="wrapperbox indexpage hasmenu" id="app"  v-show="loaded==true">
        <div class="scrollbox">
                <div class="top">
                    <div class="swiper-container swiper-no-swiping">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="item in bannerData"  :style="{'background-color':(item.theme_color!=''?item.theme_color:'#6C7AA4')}"></div>
                        </div>
                    </div>
                </div>
                <div class="header">
                    <div class="position">
                        <span>成武县</span>
<!--                        <div class="icon"><i class="el-icon-arrow-right"></i></div>-->
                    </div>
                    <a href="search.html" class="searchbox">
                        <div class="icon">
                            <i class="icon el-icon-search"></i>
                        </div>
                        <span class="input">为您找到最优惠的商品</span>
                        <div :class="['icon','clear',{'show': serachtxt!=''}]" @click="clearSearch">
                            <i class="el-icon-circle-close"></i>
                        </div>
                    </a>
                    <div class="btn" @click="openpop('indexcode')"><img src="images/codeBtn.png" alt=""></div>
                </div>
                <div class="swiperbox">
                    <div class="swiper-container">
                        <div class="swiper-wrapper">
                            <div class="swiper-slide" v-for="item in bannerData">
                                <a :href="item.jump_url" v-if="item.jump_url!=''">
                                    <img :src="item.image_url" alt="">
                                </a>
                                <img :src="item.image_url" alt="" v-else>
                            </div>
                        </div>
                        <div class="swiper-pagination"></div>
                    </div>
                </div>
                <div class="menu">
                    <div class="scroll">
                        <div class="itembox">
                            <div class="item"  v-for="item in menuData">
                                <div class="it" v-if="cateId==item.id" :cate_id="item.id">
                                    <div class="img">
                                        <img :src="item.selected_image_url" alt="">
                                    </div>
                                    <p>{{item.name}}</p>
                                </div>
                                <div class="it" v-else :cate_id="item.id" @click="changeCate(item.id)">
                                    <div class="img">
                                        <img :src="item.image_url" alt="">
                                    </div>
                                    <p>{{item.name}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="cate0" v-if="cateId==0">
                    <div class="tehuibox" v-if="tehuiData!=''">
                        <div class="product">
                            <h3 class="title">每日特惠</h3>
                            <a :href="'./product.html?id='+tehuiData.id">
                                <div class="img"><img :src="tehuiData.cover_image_url" alt=""></div>
                                <div class="text">
                                    <h4>{{tehuiData.title}}</h4>
                                    <p>{{tehuiData.intro}}</p>
                                </div>
                                <div class="label">
                                    <div class="fl">
                                        <h5><em>￥</em>{{tehuiData.sale_price}}</h5>
                                        <span><em>门市价：¥{{tehuiData.original_price}}</em></span>
                                    </div>
                                    <div class="fr">已售：{{tehuiData.sales_units}}</div>
                                </div>
                            </a>
                        </div>
                    </div>
                    <div class="hotbox" v-if="hotData!=''">
                        <h3 class="title"><img src="images/index-title-l.png" alt=""><span>热门商品</span><img src="images/index-title-r.png" alt=""></h3>
                        <div class="probox">
                            <a :href="'./product.html?id='+item.id" class="product"  v-for="(item,i) in hotData">
                                <p class="tit">本商品由{{item.merchant_name}}提供</p>
                                <div class="img">
                                    <img :src="item.cover_image_url" alt="">
                                    <div class="status wait" v-if="item.ongoing_status=='coming_soon'">
                                        <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                                        <span>待开抢</span>
                                    </div>
                                    <div class="status going" v-if="item.ongoing_status=='on_sale'"><span>抢购中</span></div>
                                    <div class="status goend" v-if="item.ongoing_status=='offline_soon'">
                                        <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                                        <span>即将下架</span>
                                    </div>
                                    <div class="status"  v-if="item.ongoing_status=='expired'"><span>已下架</span></div>
                                </div>
                                <div class="text">
                                    <h4>{{item.title}}</h4>
                                    <p>{{item.intro}}</p>
                                </div>
                                <div class="label">
                                    <div class="fl">
                                        <h5><em>￥</em>{{item.sale_price}}</h5>
                                        <span><em>门市价：¥{{item.original_price}}</em></span>
                                    </div>
                                    <div class="fr">已售：{{item.sales_units}}</div>
                                </div>
                            </a>
                        </div>
                    </div>
                </div>
                <div class="cate hotbox" v-else>
                    <div class="empty" v-if="proData.length==0">
                        <div class="img"><img src="images/order-empty.png" alt=""></div>
                        <p>该分类下暂时还有商品</p>
                    </div>
                    <div class="probox" v-else>
                        <a :href="'./product.html?id='+item.id" class="product"  v-for="(item,i) in proData">
                            <p class="tit">本商品由{{item.merchant_name}}提供</p>
                            <div class="img">
                                <img :src="item.cover_image_url" alt="">
                                <div class="status wait" v-if="item.ongoing_status=='coming_soon'">
                                    <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                                    <span>待开抢</span>
                                </div>
                                <div class="status going" v-if="item.ongoing_status=='on_sale'"><span>抢购中</span></div>
                                <div class="status goend" v-if="item.ongoing_status=='offline_soon'">
                                    <span><i v-if="showTime[i].dd!=0">{{showTime[i].dd}}天</i>{{showTime[i].hh}}小时{{showTime[i].mm}}分钟{{showTime[i].ss}}秒</span>
                                    <span>即将下架</span>
                                </div>
                                <div class="status" v-if="item.ongoing_status=='expired'"><span>已下架</span></div>
                            </div>
                            <div class="text">
                                <h4>{{item.title}}</h4>
                                <p>{{item.intro}}</p>
                            </div>
                            <div class="label">
                                <div class="fl">
                                    <h5><em>￥</em>{{item.sale_price}}</h5>
                                    <span><em>门市价：¥{{item.original_price}}</em></span>
                                </div>
                                <div class="fr">已售：{{item.sales_units}}</div>
                            </div>
                        </a>
                    </div>
                </div>
                <p v-if="loading==false" class="loading">加载中...</p>
                <p v-if="has_more==false && proData.length>10" class="loading">没有更多了</p>
        </div>
        <div class="pop indexcode">
            <div class="shadow"></div>
            <div class="wrap">
                <div @click="closepop('indexcode')" class="close"><img src="images/index-close.png" alt=""></div>
                <div class="popcon">
                    <div class="code"><img src="images/index-code.png" alt=""></div>
                    <div class="point"><img src="images/index-point.png" alt=""></div>
                    <div class="tit1"><img src="images/index-tit1.png" alt=""></div>
                    <div class="tit2"><img src="images/index-tit2.png" alt=""></div>
                </div>
            </div>
        </div>
        <div class="indexbotmenu">
            <a href="./index.html" class="item">
                <div class="img"><img src="images/index-botmenu-ico1-select.png" alt=""></div>
                <p>首页</p>
            </a>
            <a href="./order.html" class="item">
                <div class="img"><img src="images/index-botmenu-ico2.png" alt=""></div>
                <p>订单</p>
            </a>
            <a href="./my.html" class="item">
                <div class="img"><img src="images/index-botmenu-ico3.png" alt=""></div>
                <p>我的</p>
            </a>
        </div>
    </div>
    
</body>
<script>
    new Vue({
        el: '#app',
        data () {
            return {
                loaded:false,
                bannerData:'',
                menuData:'',
                tehuiData:'',
                hotData:'',
                showTime:[],
                getTime:null,
                propage:1,
                limit:10,
                proData:'',
                serachtxt:'',
                cateId:0,
                allowclick:true,
                loading: true,
                has_more:true,
            }
        },
        mounted () {
            
            var that=this;
            that.getinitdata();
        },
        methods: {
            getTimeList(){
                var that = this;
                that.getTime=setInterval(function(){
                    var arr=[];
                    var num=0;
                    for (var i in that.showTime) {
                        arr.push(that.showTime[i]);
                        if(that.showTime[i].time==0){
                            num++;
                        }
                    }
                    for (var i in arr) {
                        if (arr[i].time > 0) {
                            arr[i].time-=1000;
                            var dd = Math.floor(arr[i].time / 1000 / 60 / 60 / 24);
                            var hh = Math.floor((arr[i].time / 1000 / 60 / 60) % 24);
                            var mm = Math.floor((arr[i].time / 1000 / 60) % 60);
                            var ss = Math.floor((arr[i].time / 1000) % 60);
                            /*if(0<=dd && dd<10){ dd='0'+dd }else */if(dd<0){dd=0}
                            /*if(0<=hh && hh<10){ hh='0'+hh }else */if(hh<0){hh=0}
                            /*if(0<=mm && mm<10){ mm='0'+mm }else */if(mm<0){mm=0}
                            /*if(0<=ss && ss<10){ ss='0'+ss }else */if(ss<0){ss=0}
                            arr[i]["dd"] = dd;
                            arr[i]["hh"] = hh;
                            arr[i]["mm"] = mm;
                            arr[i]["ss"] = ss;
                        }else{
                            arr[i]["dd"] = 0;
                            arr[i]["hh"] = 0;
                            arr[i]["mm"] = 0;
                            arr[i]["ss"] = 0;
                            if(that.cateId==0){
                                if(that.hotData[i].ongoing_status=='coming_soon'){
                                    that.hotData[i].ongoing_status='on_sale'
                                }
                                if(that.hotData[i].ongoing_status=='offline_soon'){
                                    that.hotData[i].ongoing_status='expired'
                                }
                            }else{
                                if(that.proData[i].ongoing_status=='coming_soon'){
                                    that.proData[i].ongoing_status='on_sale'
                                }
                                if(that.proData[i].ongoing_status=='offline_soon'){
                                    that.proData[i].ongoing_status='expired'
                                }
                            } 
                        }
                    }
                    that.showTime=arr;
                },1000);
            },
            goSearch:function(){
                var that=this;
                that.serachtxt='搜索：'+that.serachtxt
            },
            clearSearch:function(){
                var that=this;
                that.serachtxt='';
            },
            getinitdata:function(){
                var that=this;
                var ready1=false,ready2=false,ready3=false,ready4=false;
                var load=setInterval(()=>{
                    if(ready1==true && ready2==true && ready3==true && ready4==true){
                        that.loaded=true;
                        clearInterval(load);
                        that.$nextTick(function () {
                            var swiper0 = new Swiper('.top .swiper-container',{
                                observer: true,
                                observeParents: true,
                                observeSlideChildren: true,
                                watchOverflow: true,
                                effect : 'fade',
                                // spaceBetween:15,
                                autoplay: true,
                            })
                            var swiper1 = new Swiper('.swiperbox .swiper-container',{
                                observer: true,
                                observeParents: true,
                                observeSlideChildren: true,
                                watchOverflow: true,
                                spaceBetween:5,
                                // autoHeight:true,
                                autoplay: true,
                                pagination: {
                                    el: '.swiperbox .swiper-pagination',
                                },on:{
                                    slideChangeTransitionEnd: function(){
                                        swiper0.slideTo(this.activeIndex, 300, false);
                                    },
                                },
                            })
                            $('.scrollbox').get(0).addEventListener('scroll', function() {
                                let ele = $('.scrollbox').get(0); // 获得html
                                let scrollTop = ele.scrollTop; // 向上滚动的高度
                                let scrollHeight = ele.scrollHeight; // 滚动内容区域总高度
                                let clientHeight = ele.clientHeight; // 可见高度
                                if (clientHeight + scrollTop >= scrollHeight) { // 已经滚动到底部
                                    if(that.loading==true && that.has_more==true){
                                        that.load ()
                                    }
                                }
                            })
                        })
                    }
                },100)
                // 获取banner
                common_get('banners').then(res => {
                    that.bannerData=res;
                    ready1=true;
                })
                // 获取商品分类
                common_get('product_categories').then(res => {
                    res.unshift({"name": "全部","id": 0,"image_url": "./images/cate-all.png","selected_image_url": "./images/cate-all-select.png"})
                    that.menuData=res;
                    ready2=true;
                })
                // 获取每⽇特惠商品
                common_get('product_daily_recommend').then(res => {
                    that.tehuiData=res;
                    ready3=true;
                })
                // 获取热⻔商品
                client_get('products/hot?page='+that.propage+'&limit='+that.limit).then(res => {
                    that.has_more=res.has_more;
                    that.hotData=res.list;
                    if(that.hotData.length>0){
                        $(that.hotData).each((i,v)=>{
                            var time=0;
                            if(v.ongoing_status=='coming_soon'){
                                v.start_time=v.start_time.replace(/-/g,'/');
                                time=new Date(v.start_time).getTime()- new Date().getTime();
                            }else if(v.ongoing_status=='offline_soon'){
                                v.end_time=v.end_time.replace(/-/g,'/');
                                time=new Date(v.end_time).getTime()- new Date().getTime();
                            }
                            var dd=0,hh=0,mm=0,ss=0;
                            if(time>0){
                                dd = Math.floor(time / 1000 / 60 / 60 / 24);
                                hh = Math.floor((time / 1000 / 60 / 60) % 24);
                                mm = Math.floor((time / 1000 / 60) % 60);
                                ss = Math.floor((time / 1000) % 60);
                                /*if(0<=dd && dd<10){ dd='0'+dd }else */if(dd<0){dd=0}
                                /*if(0<=hh && hh<10){ hh='0'+hh }else */if(hh<0){hh=0}
                                /*if(0<=mm && mm<10){ mm='0'+mm }else */if(mm<0){mm=0}
                                /*if(0<=ss && ss<10){ ss='0'+ss }else */if(ss<0){ss=0}
                            }
                            that.showTime.push({'time':time,'dd':dd,'hh':hh,'mm':mm,'ss':ss});
                        })
                        that.getTimeList();
                    }
                    ready4=true;
                })

            },
            changeCate:function(id){
                var that=this;
                clearInterval(that.getTime);
                that.propage=1;
                that.showTime=[];
                that.cateId=id;
                if(that.cateId==0){
                    that.hotData='';
                    that.getinitdata();
                }else{
                    that.proData='';
                    that.getCatePro();
                }
            },
            getCatePro:function(){
                var that=this;
                client_get('products?category_id='+that.cateId+'&page='+that.propage+'&limit='+that.limit).then(res => {
                    that.has_more=res.has_more;
                    that.proData=res.list;
                    if(that.proData.length>0){
                        $(that.proData).each((i,v)=>{
                            var time=0;
                            if(v.ongoing_status=='coming_soon'){
                                v.start_time=v.start_time.replace(/-/g,'/');
                                time=new Date(v.start_time).getTime()- new Date().getTime();
                            }else if(v.ongoing_status=='offline_soon'){
                                v.end_time=v.end_time.replace(/-/g,'/');
                                time=new Date(v.end_time).getTime()- new Date().getTime();
                            }
                            var dd=0,hh=0,mm=0,ss=0;
                            if(time>0){
                                dd = Math.floor(time / 1000 / 60 / 60 / 24);
                                hh = Math.floor((time / 1000 / 60 / 60) % 24);
                                mm = Math.floor((time / 1000 / 60) % 60);
                                ss = Math.floor((time / 1000) % 60);
                                /*if(0<=dd && dd<10){ dd='0'+dd }else */if(dd<0){dd=0}
                                /*if(0<=hh && hh<10){ hh='0'+hh }else */if(hh<0){hh=0}
                                /*if(0<=mm && mm<10){ mm='0'+mm }else */if(mm<0){mm=0}
                                /*if(0<=ss && ss<10){ ss='0'+ss }else */if(ss<0){ss=0}
                            }
                            that.showTime.push({'time':time,'dd':dd,'hh':hh,'mm':mm,'ss':ss});
                        })
                        that.getTimeList();
                    }
                })
            },
            load () {
                var that=this;
                that.loading = false;
                that.propage++;
                if(that.cateId==0){
                    client_get('products/hot?page='+that.propage+'&limit='+that.limit).then(res => {
                        that.has_more=res.has_more;
                        if(res.list.length>0){
                            $(res.list).each((i,v)=>{
                                var time=0;
                                that.hotData.push(v);
                                if(v.ongoing_status=='coming_soon'){
                                    v.start_time=v.start_time.replace(/-/g,'/');
                                    time=new Date(v.start_time).getTime()- new Date().getTime();
                                }else if(v.ongoing_status=='offline_soon'){
                                    v.end_time=v.end_time.replace(/-/g,'/');
                                    time=new Date(v.end_time).getTime()- new Date().getTime();
                                }
                                var dd=0,hh=0,mm=0,ss=0;
                                if(time>0){
                                    dd = Math.floor(time / 1000 / 60 / 60 / 24);
                                    hh = Math.floor((time / 1000 / 60 / 60) % 24);
                                    mm = Math.floor((time / 1000 / 60) % 60);
                                    ss = Math.floor((time / 1000) % 60);
                                    /*if(0<=dd && dd<10){ dd='0'+dd }else */if(dd<0){dd=0}
                                    /*if(0<=hh && hh<10){ hh='0'+hh }else */if(hh<0){hh=0}
                                    /*if(0<=mm && mm<10){ mm='0'+mm }else */if(mm<0){mm=0}
                                    /*if(0<=ss && ss<10){ ss='0'+ss }else */if(ss<0){ss=0}
                                }
                                that.showTime.push({'time':time,'dd':dd,'hh':hh,'mm':mm,'ss':ss});
                            })
                        }
                        that.loading = true;
                    })
                }else{
                    client_get('products?category_id='+that.cateId+'&page='+that.propage+'&limit='+that.limit).then(res => {
                        that.has_more=res.has_more;
                        if(res.list.length>0){
                            $(res.list).each((i,v)=>{
                                that.proData.push(v);
                                var time=0;
                                if(v.ongoing_status=='coming_soon'){
                                    v.start_time=v.start_time.replace(/-/g,'/');
                                    time=new Date(v.start_time).getTime()- new Date().getTime();
                                }else if(v.ongoing_status=='offline_soon'){
                                    v.end_time=v.end_time.replace(/-/g,'/');
                                    time=new Date(v.end_time).getTime()- new Date().getTime();
                                }
                                var dd=0,hh=0,mm=0,ss=0;
                                if(time>0){
                                    dd = Math.floor(time / 1000 / 60 / 60 / 24);
                                    hh = Math.floor((time / 1000 / 60 / 60) % 24);
                                    mm = Math.floor((time / 1000 / 60) % 60);
                                    ss = Math.floor((time / 1000) % 60);
                                    /*if(0<=dd && dd<10){ dd='0'+dd }else */if(dd<0){dd=0}
                                    /*if(0<=hh && hh<10){ hh='0'+hh }else */if(hh<0){hh=0}
                                    /*if(0<=mm && mm<10){ mm='0'+mm }else */if(mm<0){mm=0}
                                    /*if(0<=ss && ss<10){ ss='0'+ss }else */if(ss<0){ss=0}
                                }
                                that.showTime.push({'time':time,'dd':dd,'hh':hh,'mm':mm,'ss':ss});
                            })
                        }
                        that.loading = true;
                    })
                }
            },
            openpop:function(type){
                var that=this;
                if(that.allowclick==true){
                    that.allowclick=false;
                    console.log($('.'+type+'.pop'))
                    $('.'+type+'.pop').fadeIn(500);
                    setTimeout(()=>{
                        that.allowclick=true;
                    },500)
                }
            },
            closepop:function(type){
                var that=this;
                if(that.allowclick==true){
                    that.allowclick=false;
                    $('.'+type+'.pop').fadeOut(500);
                    setTimeout(()=>{
                        that.allowclick=true;
                    },500)
                }
            },
        }
    });
</script>
</html>